<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
   	
   <script type="text/javascript" src="../../js/jquery-3.3.1.min.js" ></script>
    <script>
    	$(function(){
    		 
    	/*	$("#nav li").mouseover(function(){
    			 
    			$(this).find("p").show();
    			$(this).find("span").css("background-color","#c81623");
    		}).mouseout(function(){
    			$(this).find("p").hide();
    			$(this).find("span").css("background-color","black");
    		});*/
    	 
    	 $("#nav li").bind({
    	 	"mouseover":function(){
    	 			$(this).find("p").show();
    				$(this).find("span").css("background-color","#c81623");
    		
    	 	}
    	 	,
    	 	"mouseout":function(){
    	 		$(this).find("p").hide();
    			$(this).find("span").css("background-color","black");
    	 	}
    	 });
    	 $("#can").click(function(){
    	 	$("#nav li").unbind();
    	 });
    	 
    	 $("#p").click(function(){
    	 	$(this).toggleClass("dog");
    	 });
    	});
    </script>
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
<input type="button" value="取消" id="can"/>
<img src="../../img/dog.jpg" id="p"/>

</body>
</html>